<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <link rel="stylesheet" type="text/css"  href="/static/css/index.css">
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/bootstrap-3.3.7-dist/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap-3.3.7-dist/js/confirm.js"></script>
</head>

<body>
<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天商城!</div>
			<div class="fr">
				<div class="user_link fl">
					<span>|</span>
                    <a href="{{ url_for('index') }}">首页</a>
                    <span>|</span>
                    <a href="{{ url_for('user.main')}}">用户中心</a>
					<span>|</span>
					<a href="{{ url_for('user.showCart')}}">我的购物车</a>
				</div>
			</div>
		</div>
	</div>

<!-- 第4块 -->
<!-- 添加     -->


	<div class="total_count">全部商品<em id="show1">0</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
<form method="post" action="{{ url_for('user.batchDeletes') }}">
    {% for shopcart in shopcarts %}
    <ul class="cart_list_td clearfix" >
		<li class="col01"><input type="hidden" name="id"  value="{{ shopcart.product.id }}" ><input type="checkbox" class="ccc" name="subcheck"  name="pid" value="{{ shopcart.product.id }}" onclick="count()"/></li>
		<li class="col02"><img src="{{ shopcart.product.images }}"></li>
		<li class="col03"><a href="{{ url_for('product.detail',id=shopcart.product['id']) }}">{{ shopcart.product.pname }}</a><br><em>{{ shopcart.product.price }}元/件</em></li>
		<li class="col05">{{ shopcart.product.price}}元</li>
		<li class="col06">
			<div class="num_add">
                <a class="add fl" onclick="add(this)">+</a>
				<input type="text" class="num_show" id="num" value="{{ shopcart.number }}"/>
                <a class="minus fl" onclick="min(this)">-</a>
			</div>
		</li>
        <li class="col07">{{ shopcart.product.price*shopcart.number }}元</li>
		<li class="col08"><a href="{{ url_for('user.deleteFromCart',id=shopcart.product['id']) }}">删除</a></li>
	</ul>

    {% endfor %}



	<ul class="settlements">
		<li class="col01"><input type="checkbox" id="aaa" onclick="mall()"/></li>
		<li class="col02">全选</li>
		<li class="col03">
            合计(不含运费)：<span>¥</span><em id="show2">0</em><br>
            共计<b  id="show">0</b>件商品
        </li>
        <li class="col04"><a  href="" onclick="batchDeletes()">去结算</a></li>
	</ul>
</form>
	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2019 徐维维贾梦雪信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>


</body>
<script>


    function batchDeletes(){ //判断至少写了一项
        var checkedNum = $("input[name='subcheck']:checked").length;
        if(checkedNum==0){
            alert("请至少选择一件商品!");
            return false;
        }
        if(confirm("确定购买?")){
            var checkedList = new Array();
            $("input[name='subcheck']:checked").each(function(){
                checkedList.push($(this).prev().val());
            });
            $.get('{{ url_for('user.batchDeletes') }}',{"delitems":checkedList.toString()},function (data) {

                if(data){
                    alert("结算成功");
                    window.location.reload();
                }
                });
        }
    }


    function add(obj) {
        var a=$(obj).next().val();
        $(obj).next().val(Number(a)+1);
        var b = $(obj).parent().parent().next().html();
        var c = $(obj).parent().parent().prev().html();

        var bb = parseInt(c);
        var cc = parseInt(b);
        var dd = bb+cc;
        $(obj).parent().parent().next().html(dd);
    }

    function min(obj) {
        var a=$(obj).prev().val();
        var b = $(obj).parent().parent().next().html();{#小计#}
        var c = $(obj).parent().parent().prev().html();{#单价#}
        var bb = parseInt(b);
        var cc = parseInt(c);

        var dd = bb-cc;
        $(obj).prev().val(Number(a)-1);
        if( $(obj).prev().val()<0){
            $(obj).prev().val(0);
            $(obj).parent().parent().next().html(0);
        }else {
            $(obj).parent().parent().next().html(dd);
        }
    }

    function mall() {//使用单机事件触发该方法
        //1.获取全选按钮的状态
        //var status = $("#aaa").attr("checked"); //获取有问题
        var status = document.getElementById("aaa").checked;
        //alert(status);   //选中为true  未选中为false
        if(status==false){
            $("#show2").html(0);
        }
        var ccc = document.getElementsByClassName("ccc"); //n个元素
        for (var i = 0; i < ccc.length; i++) {
            ccc[i].checked = status;
        }
        //调用计算方法
        count();
    }

    function count() {
        var num=0;
        var ccc = document.getElementsByClassName("ccc");
        var value1 = 0;
        for (var i=0;i<ccc.length;i++){
            if (ccc[i].checked){
                num++;
                var $ccc=$(ccc[i]);
                {#获取总计价格#}
	            var p1=parseInt($ccc.parent().next().next().next().next().next().html());
	            value1 = value1+p1;
	            $("#show1").html(num);
	            $("#show2").html(value1);
            }
        }
        //显示在页面上
        $("#show").html(num);
        //判断是否勾选全选按钮
        if (num==ccc.length){
            document.getElementById("aaa").checked=true;
        }else {
            document.getElementById("aaa").checked=false;
        }
    }




</script>
</html>